<template>
  <el-container>
    <myHearder v-if="hearderShow"></myHearder>

    <el-header v-else>
      <el-row class="titleBox">
        <el-col :span="18" :offset="1">
          <div class="article-title">{{ articleInfo.title }}</div>
        </el-col>
        <el-col :span="5">
          <div class="authorBox">
            <el-avatar src="#"></el-avatar>
            <span>{{ articleInfo.author }}</span>
            <el-button type="info" size="mini" round>关注</el-button>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <div class="main">
        <div class="articleContent">
          <h2>{{ articleInfo.title }}</h2>
          <p v-html="articleInfo.content"></p>
        </div>
        <!-- 右侧部分 -->
        <div class="rightBox">
          <div class="kongbai"></div>
          <div class="authorArticleBox">
            <el-card class="box-card">
              <!-- 作者头像部分 -->
              <div slot="header" class="clearfix">
                <el-avatar src="#"></el-avatar>
                <span>{{ articleInfo.author }}</span>
                <el-button type="info" size="mini" round>关注</el-button>
              </div>
              <!-- 文章列表 -->
              <articleList :articleList="authorArticle"></articleList>
            </el-card>
          </div>
          <div class="tuijian-article">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>|</span>
                <span>推荐阅读</span>
              </div>
              <div class="text-item">
                <p>最美的期待</p>
                <p>阅读：222</p>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </el-main>

    <!-- 评论界面 -->
    <el-main class="commentBox">
      <div class="main">
        <!-- 评论框 -->
        <div class="commentContent">
          <el-input
            :rows="3"
            class="commentInput"
            type="textarea"
            v-model="commentInput"
            placeholder="写下你的评论..."
            @focus="showFocus"
          ></el-input>
          <!-- 发布按钮 -->
          <div class="bntBox" v-if="isShow">
            <span>Ctrl + Enter发表</span>
            <div class="bnt">
              <el-button type="danger" size="mini" round @click="addComment"
                >发布</el-button
              >
              <el-button size="mini" round @click="isShow = false"
                >取消</el-button
              >
            </div>
          </div>
          <!-- 具体评论信息 -->
          <div class="commentInfo">
            <div class="quanbupinlun">
              <span>|</span>
              <span>全部评论</span>
              <span class="commentNum">{{ count }}</span>
            </div>
            <!-- 评论主要内容 -->
            <div class="infoBox" v-for="(item, index) in comments" :key="index">
              <div class="username">
                <el-avatar size="medium" :src="item.avater" round></el-avatar>
                <!-- 用户评论具体信息 -->
                <div class="nameInfo">
                  <div class="name">{{ item.username }}</div>
                  <div class="time">
                    <span>{{ item.createTime }}</span>
                  </div>
                </div>
              </div>
              <div class="info">
                {{ item.content }}
              </div>
              <div class="starbox">
                <span class="el-icon-thumb">点赞</span>
                <span class="el-icon-chat-square">回复</span>
              </div>
              <el-divider />
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import articleList from "./components/articleList.vue";
import myHearder from "./components/myHeader.vue";
import { getOneArticles, getAllArticles } from "@/api/article";
import { addComments, getWebComments } from "@/api/comment";
import dayjs from "dayjs";
export default {
  components: {
    articleList,
    myHearder,
  },
  data() {
    return {
      hearderShow: true,
      commentInput: "", //评论框内容
      isShow: false, //是否显示发布按钮
      id: this.$route.query.id, //文章ID
      articleInfo: {}, //文章信息
      authorArticle: [], //作者其他文章
      comments: [], //评论相关信息
      page: 1, //当前查询的评论页数
      count: 0, //总条数
      pageSize: 10, //每页显示评论的数量
    };
  },
  created() {
    this.getArticleInfo();
    this.findALLComments();
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll); // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
  },
  methods: {
    async getArticleInfo() {
      //  获取文章信息
      const { data } = await getOneArticles({ id: this.id });
      this.articleInfo = data.result;
      console.log( this.articleInfo);
      //获取本文作者其他文章
      const rel = await getAllArticles({
        author: data.result.author,
        page: 1,
      });
      this.authorArticle = rel.data.result.slice(0, 4);
    },

    //添加评论功能
    async addComment() {
      const { data } = await addComments({
        articleId: this.articleInfo.id,
        content: this.commentInput,
        username: this.$store.state.user.username,
        author: this.articleInfo.author,
        articleTitle:this.articleInfo.title,
        createTime: dayjs(new Date()).format("YYYY-MM-DD/HH:mm:ss"),
        avater: this.$store.state.user.avater,
      });
    console.log(data);
      if (data.code == 200) {
        this.$message({
          message: data.msg,
          type: "success",
          center: true,
        });
      } else {
        [
          this.$message({
            message: "发布评论失败",
            type: "error",
            center: true,
          }),
        ];
      }
    },

    // 获取评论
    async findALLComments() {
      const { data } = await getWebComments({
        articleId: this.id,
        page: this.page,
      });
    
      this.comments = data.result;
      this.count = data.count;
      this.pageSize = data.pageSize;
    },

    showFocus() {
      this.isShow = true;
    },

    // 滚动事件
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop; // 滚动条偏移量
      if (scrollTop > 80) {
        this.hearderShow = false;
      } else if (scrollTop < 80) {
        this.hearderShow = true;
      }
    },
  },
};
</script>

<style  scoped  src='./style/articleInfo.css'>
</style>